'use strict';

$(window).on('load', function () {
    // 将登陆的用户信息传递给一个全局变量之后会在多处调用
    var currentUser, jwtUser;
    var phoneRegex = new RegExp('^[1][3,4,5,7,8][0-9]{9}$');
    var pwRegex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$');
    var nicknameRegex = new RegExp('^.{3,20}$');
    var regoRegex = new RegExp('^(([\u4e00-\u9fa5][a-zA-Z]|[\u4e00-\u9fa5]{2}\d{2}|[\u4e00-\u9fa5]{2}[a-zA-Z])[-]?|([wW][Jj][\u4e00-\u9fa5]{1}[-]?)|([a-zA-Z]{2}))([A-Za-z0-9]{5}|[DdFf][A-HJ-NP-Za-hj-np-z0-9][0-9]{4}|[0-9]{5}[DdFf])$');
    var locationRegex = new RegExp('^.{3,50}$');
    var contentRegex = new RegExp('^.{3,50}$');

    // 获取现在登录的用户
    function getUser() {
        var token = localStorage.getItem('token');
        if (!token) {
            currentUser = null;
            $('#userInfo').hide();
            $('#noLogin').show();
            $('#member-menu').hide();
            return;
        }
        jwtUser = jwt_decode(token);
        $('#sidebar-nickname').text(jwtUser.nickname);
        if (jwtUser.isAdmin == 0) {
            $('#member-menu').hide();
        }
        console.log('jwtTokenUser', jwtUser);

        //*******************
        // TODO: 通过ajax获取已经登陆的用户信息，
        // 请在下方「？」处填写适当的语句让这段代码可以正常运行
        //*******************
        $.ajax({
            url: '/api/users/me',
            type: 'GET',
            contentType: 'application/json',
            // ?
            success: function (data) {
                console.log('me', data);
                currentUser = data.user;
                $('#userInfo').show();
                $('#noLogin').hide();
            },
            error: function (jqXhr, _textStatus, _errorMessage) {
                console.error(JSON.parse(jqXhr.responseText).message);
                $('#userInfo').hide();
                $('#noLogin').show();
                localStorage.removeItem('token');
                $.notify("登陆信息错误", "error");
                setTimeout(function () {
                    location.href = "/";
                }, 1000)
            }
        })
    }

    getUser();

    // 每一页都有它独立的 page name，比如车辆列表首页就是‘carlist’
    var body = $('body');
    switch (body.attr('data-page')) {
        case "carlist":
            var orderby = 'cmt', order = 'desc', kw = "", indexpage = 1;  //默认排序方式
            var delayTimer;
            function getCars() {
                $.ajax({
                    url: '/api/cars',
                    type: 'GET',
                    contentType: 'application/json',
                    data: {
                        order,
                        orderby,
                        kw,
                        page: indexpage
                    },
                    success: function (data) {
                        console.log('车辆', data.cars);
                        if (indexpage === 1) $('#cars').html('');
                        if (data.cars.length === 0 && indexpage > 1) indexpage--;
                        $.each(data.cars, function (_index, value) {
                            var rego = value.rego.slice(0, 2) + '·' + value.rego.slice(2);   // 在车牌号中间加入一个点模仿现实的样子
                            var rate, rateString = "", adminString = "";
                            //*******************
                            // TODO: 我们知道，一个空的星星的语句是 <i class="bi bi-star">，
                            // 一个实心的星星的语句是 <i class="bi bi-star-fill"></i>，
                            // 一个半满的星星的语句是 <i class="bi bi-star-half"></i>，
                            // 请在下方「？」处填写适当的语句让网页在显示车辆信息时显示分数对应的星星，
                            // 并在括号内显示收到多少条评价，0～5颗星星之间
                            //*******************
                            if (value.commentCount) {
                                // ？
                            } else {
                                rateString = `
                                <i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i> (无评价)`
                            }

                            if (jwtUser && jwtUser.isAdmin == 1) {
                                adminString = `
                                <div class="card-footer text-center">
                                    <button class="btn btn-danger text-white" onclick="deleteRego('${value.rego}')"><i class="bi bi-trash-fill"></i></button>
                                </div>
                                `;
                            }

                            $('#cars').append(`
              <div class="col-12 col-sm-6 col-md-4 col-lg-3" id="${value.rego}">
                <div class="card mb-4 shadow-sm">
                  <div class="card-body text-center">
                    <div class="row align-items-center ">
                      <a href="/cars/${value.rego}" class="col d-flex justify-content-center">
                        <div style="background:#081882;margin:20px 0 20px 0; padding: 2px 2px;width: fit-content;">
                            <div style="color:#fff;font-size:25px;border: 1px solid white;border-radius: 5px;padding: 5px 10px;">
                                ${rego}
                            </div>
                        </div>
                      </a>
                    </div>
                    <p class="card-title mb-1 text-color-theme text-center">${value.model}</p>
                    <p class="text-small text-muted small">${value.color}</p>
                    <p class="mb-4">
                        ${rateString}
                    </p>
                    <div class="row">
                      <div class="col d-grid">
                        <a href="/add/${value.rego}" class="btn btn-default shadow-sm">写评价</a>
                      </div>
                      <div class="col d-grid">
                        <a href="/cars/${value.rego}" class="btn btn-light shadow-sm">查看评价</a>
                      </div>
                    </div>
                  </div>
                  ${adminString}
                </div>
              </div>
                          `);
                        });
                    },
                    error: function (jqXhr, _textStatus, _errorMessage) {
                        console.error(JSON.parse(jqXhr.responseText).message);
                        $.notify("获取车辆列表错误", "error");
                    }
                });
            }

            getCars();

            function searchKeyword() {
                kw = $('#search').val().trim();
                getCars();
            }

            // 当用户填写了搜索关键词
            $('#search').on('keyup', function () {
                clearTimeout(delayTimer);           // 延迟0.5秒搜索
                delayTimer = setTimeout(function () {
                    searchKeyword();
                }, 500);
            });

            // 当用户填写完搜索关键词立马回车
            $('#search').on('keypress', function (e) {
                if (e.which === 13)  //如果按了回车也立马搜索
                    searchKeyword();
            });

            // 当用户敲了改了排列顺序
            $('#order').on('change', function () {
                var orders = $('#order').val().split('|');
                orderby = orders[0];
                order = orders[1];
                searchKeyword();
            });

            // 屏幕滚动到底端，去获取下一页的数据
            $(window).scroll(function () {
                if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                    indexpage++;
                    getCars();
                }
            });

            break;
        case "commentlist":
            var commentpage = 1;
            function getComments() {
                //*******************
                // TODO: 我们尝试使用ajax获取评论的列表，
                // 请在下方的「？」处完成代码
                //*******************
                $.ajax({
                    // ？
                    type: 'GET',
                    contentType: 'application/json',
                    data: {
                        page: commentpage
                    },
                    success: function (data) {
                        console.log('评价', data.comments);
                        if (commentpage === 1) $('#comments').html('');
                        if (data.comments.length === 0 && commentpage > 1) commentpage--;
                        $.each(data.comments, function (_index, value) {
                            var rego = value.rego.slice(0, 2) + '·' + value.rego.slice(2);   // 在车牌号中间加入一个点模仿现实的样子
                            // 显示评价的好坏，用向下或向上的大拇指作为展示
                            var thumb = '<i class="bi bi-hand-thumbs-up-fill fs-4" style="color:green;"></i>';
                            if (value.rate === 0) {
                                thumb = '<i class="bi bi-hand-thumbs-down-fill fs-4" style="color:red;"></i>';
                            }

                            var adminDeleteButton = "";
                            if (jwtUser && jwtUser.isAdmin == 1) {
                                adminDeleteButton = `
                                <div class="col-auto d-flex justify-content-end">
                                <button class="btn btn-danger text-white" onclick="deleteComment(${value.id})"><i class="bi bi-trash-fill"></i></button>
                                </div>`;
                            }
                            $('#comments').append(`
                            <div class="col-12 col-md-8 col-lg-4 mx-auto" id="comment_${value.id}">
                            <div class="card shadow-sm mb-4">
                                <div class="card-header row">
                                    <div class="col">
                                    <h6 class="my-1">${value.username}</h6>
                                    <p class="text-muted small">${value.cmtCDT}</p>
                                    </div>
                                    ${adminDeleteButton}
                                </div>
                                <div class="card-body bg-light">
                                    <div class="row mb-2">
                                        <div class="col">
                                        <a href="/cars/${value.rego}">
                                            <div style="background:#081882; padding: 2px 2px;width: fit-content;">
                                                <div style="color:#fff;font-size:16px;border: 1px solid white;border-radius: 5px;padding: 2px 4px;">
                                                    ${rego}
                                                </div>
                                            </div>
                                        </a> 
                                        </div>
                                        <div class="col-auto">
                                            ${thumb}
                                        </div>
                                    </div>
                                    <div class="row">
                                    <p>${value.content}</p>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="row">
                                        <div class="col">
                                            <h6 class="mb-0">${value.location}</h6>
                                            <p class="text-muted small">位置</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                          `);
                        });
                    },
                    error: function (jqXhr, _textStatus, _errorMessage) {
                        console.error(JSON.parse(jqXhr.responseText).message);
                        $.notify("获取评价列表错误", "error");
                    }
                });
            }
            getComments();
            $(window).scroll(function () {
                if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                    commentpage++;
                    getComments();
                }
            });
            break;
        case "signin":      // 登陆页面

            // 用户登录的话就直接跳到首页
            if (currentUser || localStorage.getItem('token'))
                location.href = "/";

            // 用户点击登陆按钮
            $('#btn-submit').on('click', function () {

                // 删除错误提示
                $('#phone-input').removeClass('is-invalid');
                $('#pw-input').removeClass('is-invalid');
                $('#phoneerror').remove();
                $('#pwerror').remove();

                // 检查错误： 是不是为空，是不是按照要求来
                var errorCount = 0;
                if (!$('#phone').val().trim() || !phoneRegex.test($('#phone').val())) {
                    phoneError();
                    errorCount++;
                }

                if (!$('#password').val().trim() || !pwRegex.test($('#password').val())) {
                    pwError();
                    errorCount++;
                }

                // 如果有错误，不继续进行代码
                if (errorCount > 0) return;

                // 将提交按钮暂时锁定，防止反复按下
                $('#btn-submit').addClass('disabled');

                // 如果没错误，提交
                $.ajax({
                    url: '/api/auth',
                    type: 'POST',
                    contentType: 'application/json',
                    dataType: 'json',
                    data: JSON.stringify({
                        phone: $('#phone').val(),
                        password: $('#password').val()
                    }),
                    success: function (res) {
                        console.log(res);
                        localStorage.setItem('token', res.token);
                        $.notify("登陆成功，正在跳转", "success");
                        //*******************
                        // TODO: 我们希望在登陆成功后，延迟1秒，将浏览器跳转到首页，
                        // 请在下方的「？」处完成代码
                        // Hit： 使用 js 的 setTimeout 函数
                        //*******************

                        // ？
                    },
                    error: function (jqXhr, _textStatus, _errorMessage) {
                        // 出错了，提示错误
                        $('#btn-submit').removeClass('disabled');
                        var error = JSON.parse(jqXhr.responseText).message.toLowerCase();
                        console.error(error);
                        if (error.indexOf('phone') > 0) {
                            phoneError();
                        }
                        if (error.indexOf('password') > 0) {
                            pwError();
                        }
                    }
                });

                function phoneError() {
                    $('#phone-input').addClass('is-invalid');
                    $('#phone-input').append(`
                    <button type="button" class="text-danger tooltip-btn" data-bs-toggle="tooltip" data-bs-placement="left" title="" id="phoneerror" data-bs-original-title="请输入有效的手机号码">
                        <i class="bi bi-info-circle"></i>
                    </button>
                    `);
                    $.notify("请输入正确的手机号", "error");
                    var _ = new bootstrap.Tooltip($('#phoneerror'), {
                        boundary: document.body
                    });
                }

                function pwError() {
                    $('#pw-input').addClass('is-invalid');
                    $('#pw-input').append(`
                    <button type="button" class="text-danger tooltip-btn" data-bs-toggle="tooltip" data-bs-placement="left" title="" id="pwerror" data-bs-original-title="请输入正确的密码">
                        <i class="bi bi-info-circle"></i>
                    </button>
                    `);
                    $.notify("密码错误", "error");
                    var _ = new bootstrap.Tooltip($('#pwerror'), {
                        boundary: document.body
                    });
                }
            });
            break;
        case "signup":      // 注册页面
            if (currentUser || localStorage.getItem('token'))
                location.href = "/";

            var vaildPw = false,
                vaildNickname = false,
                vaildPhone = false,
                validCpw = false;

            // 当焦点移出指定元素
            $('#phone').on('focusout', function () {
                $('#phoneerror').remove();
                $('#phone-input').removeClass('is-invalid');
                $('#phone-input').removeClass('is-valid');
                if (!$('#phone').val().trim() || !phoneRegex.test($('#phone').val())) {
                    phoneError();
                    return;
                }
                phoneCorrect();
            })

            $('#password').on('focusout', function () {
                $('#pwerror').remove();
                $('#pw-input').removeClass('is-invalid');
                $('#pw-input').removeClass('is-valid');
                if (!$('#password').val() || !pwRegex.test($('#password').val())) {
                    pwError();
                    return;
                }
                pwCorrect();
            })

            $('#nickname').on('focusout', function () {
                $('#nicknameerror').remove();
                $('#nickname-input').removeClass('is-invalid');
                $('#nickname-input').removeClass('is-valid');
                if (!$('#nickname').val().trim() || !nicknameRegex.test($('#nickname').val())) {
                    nameError();
                    return;
                }
                nameCorrect();
            })

            $('#confirmpassword').on('focusout', function () {
                $('#cpwerror').remove();
                $('#cpw-input').removeClass('is-invalid');
                $('#cpw-input').removeClass('is-valid');
                if (!$('#confirmpassword').val() || $('#confirmpassword').val() != $('#password').val()) {
                    cpwError();
                    return;
                }
                cpwCorrect();
            })

            // 当用户提交
            $('#btn-submit').on('click', function () {
                if (vaildNickname && validCpw && vaildPhone && vaildPw) {
                    $('#btn-submit').addClass('disabled');
                    $.ajax({
                        url: '/api/users',
                        type: 'POST',
                        contentType: 'application/json',
                        dataType: 'json',
                        data: JSON.stringify({
                            nickname: $('#nickname').val(),
                            phone: $('#phone').val(),
                            password: $('#password').val()
                        }),
                        success: function (res) {
                            console.log(res);
                            $.notify("注册成功，正在跳转", "success");
                            //*******************
                            // TODO: 我们希望在登陆成功后，延迟1秒，将浏览器跳转到登陆页面，
                            // 请在下方的「？」处完成代码
                            // Hit： 使用 js 的 setTimeout 函数
                            //*******************

                            // ？
                        },
                        error: function (jqXhr, _textStatus, _errorMessage) {
                            // 如果错误的话
                            $('#btn-submit').removeClass('disabled');
                            var error = JSON.parse(jqXhr.responseText).message.toLowerCase();
                            console.error(error);
                            if (error.indexOf('phone') > 0) {
                                phoneError();
                            }
                            if (error.indexOf('password') > 0) {
                                pwError();
                            }
                            if (error.indexOf('nickname') > 0) {
                                nameError();
                            }
                        }
                    });
                }
            });

            // 下面是各种提示出错的方法
            function nameError() {
                $('#nickname-input').addClass('is-invalid');
                $('#nickname-input').append(`
                <button type="button" class="text-danger tooltip-btn" data-bs-toggle="tooltip" data-bs-placement="left" title="" id="nicknameerror" data-bs-original-title="昵称需要在3至20个字符之间">
                    <i class="bi bi-info-circle"></i>
                </button>
                `);
                $.notify("昵称需要在3至20个字符之间", "error");
                var _ = new bootstrap.Tooltip($('#nicknameerror'), {
                    boundary: document.body
                });
            }

            function nameCorrect() {
                $('#nickname-input').addClass('is-valid');
                vaildNickname = true;
            }

            function phoneError() {
                $('#phone-input').addClass('is-invalid');
                $('#phone-input').append(`
                <button type="button" class="text-danger tooltip-btn" data-bs-toggle="tooltip" data-bs-placement="left" title="" id="phoneerror" data-bs-original-title="请输入有效的手机号码">
                    <i class="bi bi-info-circle"></i>
                </button>
                `);
                $.notify("请输入正确的手机号", "error");
                var _ = new bootstrap.Tooltip($('#phoneerror'), {
                    boundary: document.body
                });
            }

            function phoneCorrect() {
                $('#phone-input').addClass('is-valid');
                vaildPhone = true;
            }

            function pwError() {
                $('#pw-input').addClass('is-invalid');
                $('#pw-input').append(`
                <button type="button" class="text-danger tooltip-btn" data-bs-toggle="tooltip" data-bs-placement="left" title="" id="pwerror" data-bs-original-title="密码至少8位并包含:一个大写字母、一个数字以及一个特殊字符">
                    <i class="bi bi-info-circle"></i>
                </button>
                `);
                $.notify("密码至少8位\n并包含一个大写字母、\n一个数字以及\n一个特殊字符", 'error');
                var _ = new bootstrap.Tooltip($('#pwerror'), {
                    boundary: document.body
                });
            }

            function pwCorrect() {
                $('#pw-input').addClass('is-valid');
                vaildPw = true;
            }

            function cpwError() {
                $('#cpw-input').addClass('is-invalid');
                $('#cpw-input').append(`
                <button type="button" class="text-danger tooltip-btn" data-bs-toggle="tooltip" data-bs-placement="left" title="" id="cpwerror" data-bs-original-title="两次输入的密码不一致">
                    <i class="bi bi-info-circle"></i>
                </button>
                `);
                $.notify("两次输入的密码不一致", 'error');
                var _ = new bootstrap.Tooltip($('#cpwerror'), {
                    boundary: document.body
                });
            }

            function cpwCorrect() {
                $('#cpw-input').addClass('is-valid');
                validCpw = true;
            }
            break;
        case "carDetial":       // 车辆详情页面
            var page = 1;
            var carrego = $('#orignalRego').html();
            var rego = carrego.slice(0, 2) + '·' + carrego.slice(2);
            var rated = '';
            $('#rego').html(rego);

            var _ = new Swiper(".tagsswiper", {
                slidesPerView: "auto",
                spaceBetween: 0,
                pagination: false
            });

            // 当点击了分类
            $('.tag').on('click', function () {
                $('.tag').removeClass('active');
                $(this).addClass('active');
                switch ($(this).attr("id")) {
                    case 'cate-all':
                        rated = '';
                        break;
                    case 'cate-good':
                        rated = 'p';
                        break;
                    case 'cate-bad':
                        rated = 'n';
                        break;
                }
                getCarComments();
            });

            // 当点击了评论按钮
            $('#btn-add').on('click', function () {
                location.href = '/add/' + carrego;
            });

            // 获取车辆信息
            function getCarDetail() {
                $.ajax({
                    url: '/api/cars/' + carrego,
                    type: 'GET',
                    contentType: 'application/json',
                    success: function (data) {
                        console.log('车辆信息', data);
                        $('#model').html(data.car.model);
                        $('#color').html(data.car.color);
                        if (data.car.commentCount == 0) $('#cate').hide();
                        var rate, rateString = "";
                        //*******************
                        // TODO: 我们知道，一个空的星星的语句是 <i class="bi bi-star">，
                        // 一个实心的星星的语句是 <i class="bi bi-star-fill"></i>，
                        // 一个半满的星星的语句是 <i class="bi bi-star-half"></i>，
                        // 请在下方「？」处填写适当的语句让网页在显示车辆信息时显示分数对应的星星，
                        // 并在括号内显示收到多少条评价，0～5颗星星之间
                        //*******************
                        if (data.car.commentCount) {
                            // ？
                        } else {
                            rateString = `
                                <i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i> (无评价)`;
                        }
                        $('#rate').html(rateString);
                    },
                    error: function (jqXhr, _textStatus, _errorMessage) {
                        console.error(JSON.parse(jqXhr.responseText).message);
                        $.notify("获取评价列表错误", "error");
                        $('#cate').hide();
                    }
                });
            }

            // 获取车辆评价
            function getCarComments() {
                $.ajax({
                    url: '/api/cars/' + carrego + '/comments',
                    type: 'GET',
                    contentType: 'application/json',
                    data: {
                        'rate': rated,
                        page
                    },
                    success: function (data) {
                        console.log('评价', data.comments);
                        if (page === 1) $('#comments').html('');
                        if (data.comments.length === 0 && page > 1) page--;
                        $.each(data.comments, function (_index, value) {
                            // 显示评价的好坏，用向下或向上的大拇指作为展示
                            var thumb = '<i class="bi bi-hand-thumbs-up-fill fs-4" style="color:green;"></i>';
                            if (value.rate === 0) {
                                thumb = '<i class="bi bi-hand-thumbs-down-fill fs-4" style="color:red;"></i>';
                            }

                            $('#comments').append(`
                            <div class="col-12 col-md-8 col-lg-4 mx-auto">
                            <div class="card shadow-sm mb-4">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-auto">
                                        <div class="avatar avatar-44 shadow-sm rounded-10">
                                            <img src="/img/user3.jpeg" alt="">
                                        </div>
                                        </div>
                                        <div class="col ps-0">
                                            <h6 class="my-1">${value.username}</h6>
                                            <p class="text-muted small">${value.cmtCDT}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body bg-light">
                                    <div class="row mb-2">
                                        <div class="col">
                                        <p>${value.content}</p>
                                        </div>
                                        <div class="col-auto">
                                            ${thumb}
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="row">
                                        <div class="col">
                                            <h6 class="mb-0">${value.location}</h6>
                                            <p class="text-muted small">位置</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                          `);
                        });
                    },
                    error: function (jqXhr, _textStatus, _errorMessage) {
                        console.error(JSON.parse(jqXhr.responseText).message);
                        $.notify("获取评价列表错误", "error");
                    }
                });
            }
            getCarDetail();
            getCarComments();
            $(window).scroll(function () {
                if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                    page++;
                    getCarComments();
                }
            });
            break;
        case 'add':     // 增加评论页面
            if (!jwtUser) location.href = '/login';  // 如果没有登陆直接跳转到登陆页面

            var vaildaddress = false,
                vaildrego = false,
                vaildcontent = false;

            // 检查是不是被传递过来的车牌号，如果是，去获取车辆的详细信息
            if ($('#rego').val()) {
                if (!regoRegex.test($('#rego').val())) {
                    regoError();
                    return;
                }
                regoCorrect();
                getCarDetailOnStart();
            }

            function getCarDetailOnStart() {
                //*******************
                // TODO: 我们通过ajax获取车辆的详细信息，
                // 请在下方的「？」处完成代码
                // Hit： 尝试使用jQuery获取元素的值
                //*******************

                $.ajax({
                    // ？,
                    type: 'GET',
                    contentType: 'application/json',
                    success: function (data) {
                        console.log('car', data);
                        $('#model').val(data.car.model);
                        $('#color').val(data.car.color);
                    },
                    error: function (jqXhr, _textStatus, _errorMessage) {
                        var error = JSON.parse(jqXhr.responseText).message.toLowerCase();
                        return console.error(error);
                    }
                });
            }

            // 当填写车牌号的地方失去了焦点，查看是否合法，然后查看是不是已经存在的车牌号，如果是，获取资料
            $('#rego').on('focusout', function () {
                $('#regoerror').remove();
                $('#rego-input').removeClass('is-invalid');
                $('#rego-input').removeClass('is-valid');
                if (!$('#rego').val().trim() || !regoRegex.test($('#rego').val())) {
                    regoError();
                    return;
                }
                regoCorrect();
            })

            function regoError() {
                $('#rego-input').addClass('is-invalid');
                $('#rego-input').append(`
                <button type="button" class="text-danger tooltip-btn" data-bs-toggle="tooltip" data-bs-placement="left" title="" id="regoerror" data-bs-original-title="请输入有效的车牌号码">
                    <i class="bi bi-info-circle"></i>
                </button>
                `);
                $.notify("请输入正确的车牌号", "error");
                var _ = new bootstrap.Tooltip($('#regoerror'), {
                    boundary: document.body
                });
            }

            function regoCorrect() {
                $('#rego-input').addClass('is-valid');
                vaildrego = true;
                getCarDetailOnStart();
            }

            // 检查评价内容是否正确
            $('#content').on('focusout', function () {
                $('#contenterror').remove();
                $('#content-input').removeClass('is-invalid');
                $('#content-input').removeClass('is-valid');
                if (!$('#content').val().trim() || !contentRegex.test($('#content').val())) {
                    contentError();
                    return;
                }
                contentCorrect();
            })
            function contentError() {
                $('#content-input').addClass('is-invalid');
                $('#content-input').append(`
                <button type="button" class="text-danger tooltip-btn" data-bs-toggle="tooltip" data-bs-placement="left" title="" id="contenterror" data-bs-original-title="请输入3至50个字符。">
                    <i class="bi bi-info-circle"></i>
                </button>
                `);
                $.notify("请输入3至50个字符。", "error");
                var _ = new bootstrap.Tooltip($('#contenterror'), {
                    boundary: document.body
                });
            }

            function contentCorrect() {
                $('#content-input').addClass('is-valid');
                vaildcontent = true;
            }

            // 检查地址是否正确
            $('#address').on('focusout', function () {
                $('#addresserror').remove();
                $('#address-input').removeClass('is-invalid');
                $('#address-input').removeClass('is-valid');
                if (!$('#address').val().trim() || !locationRegex.test($('#address').val())) {
                    addressError();
                    return;
                }
                addressCorrect();
            })
            function addressError() {
                $('#address-input').addClass('is-invalid');
                $('#address-input').append(`
                <button type="button" class="text-danger tooltip-btn" data-bs-toggle="tooltip" data-bs-placement="left" title="" id="addresserror" data-bs-original-title="请输入3至50个字符。">
                    <i class="bi bi-info-circle"></i>
                </button>
                `);
                $.notify("请输入3至50个字符。", "error");
                var _ = new bootstrap.Tooltip($('#addresserror'), {
                    boundary: document.body
                });
            }

            function addressCorrect() {
                $('#address-input').addClass('is-valid');
                vaildaddress = true;
            }

            // 当用户点击提交
            $('#btn-submit').on('click', function () {
                if (!vaildaddress) addressError();
                if (!vaildcontent) contentError();
                if (!vaildrego) regoError();
                if (!vaildaddress || !vaildcontent || !vaildrego) return;

                $('#btn-submit').addClass('disabled');

                // 先看看这个车牌存在不存在
                //*******************
                // TODO: 我们通过ajax获取、更新车辆的详细信息，
                // 请在下方的两处「？」处完成代码
                // Hit： 尝试使用jQuery获取元素的值
                //*******************
                $.ajax({
                    // ？
                    type: 'GET',
                    contentType: 'application/json',
                    success: function (data) {
                        console.log('car', data);
                        // 更新车辆
                        $.ajax({
                            // ？
                            type: 'PUT',
                            contentType: 'application/json',
                            headers: {
                                'x-auth-token': localStorage.getItem('token')
                            },
                            data: JSON.stringify({
                                model: $('#model').val(),
                                color: $('#color').val()
                            }),
                            success: function (res) {
                                console.log(res);
                                addComment();
                            },
                            error: function (jqXhr, _textStatus, _errorMessage) {
                                $('#btn-submit').removeClass('disabled');
                                var error = JSON.parse(jqXhr.responseText).message.toLowerCase();
                                return console.error(error);
                            }
                        });
                    },
                    error: function (jqXhr, _textStatus, _errorMessage) {
                        // 说明没有这辆车
                        console.error(JSON.parse(jqXhr.responseText).message);

                        // 添加车辆
                        $.ajax({
                            url: '/api/cars/',
                            type: 'POST',
                            contentType: 'application/json',
                            headers: {
                                'x-auth-token': localStorage.getItem('token')
                            },
                            data: JSON.stringify({
                                rego: $('#rego').val(),
                                model: $('#model').val(),
                                color: $('#color').val()
                            }),
                            success: function (res) {
                                console.log(res);
                                addComment();
                            },
                            error: function (jqXhr, _textStatus, _errorMessage) {
                                $('#btn-submit').removeClass('disabled');
                                var error = JSON.parse(jqXhr.responseText).message.toLowerCase();
                                $('#btn-submit').removeClass('disabled');
                                return console.error(error);
                            }
                        });
                    }
                });
            });

            // 添加评价
            function addComment() {
                var isGood = $('#btn-good').prop('checked');
                var isGoodInt // 将评价选项转换为数字
                if (isGood)
                    isGoodInt = 1;
                else
                    isGoodInt = 0;
                //*******************
                // TODO: 我们通过ajax对指定车辆添加评论，
                // 请在下方的「？」处完成代码
                // Hit： 尝试使用jQuery获取元素的值
                //*******************
                $.ajax({
                    // ？
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        content: $('#content').val(),
                        rate: isGoodInt,
                        location: $('#address').val()
                    }),
                    headers: {
                        'x-auth-token': localStorage.getItem('token')
                    },
                    success: function (res) {
                        console.log(res);
                        $.notify("提交成功，正在跳转", "success");
                        // 等待一秒跳转到车辆详情页面
                        setTimeout(function () {
                            location.href = "/cars/" + $('#rego').val().trim();
                        }, 1000);
                    },
                    error: function (jqXhr, _textStatus, _errorMessage) {
                        $('#btn-submit').removeClass('disabled');
                        var error = JSON.parse(jqXhr.responseText).message.toLowerCase();
                        return console.error(error);
                    }
                });
            }

            break;

        // 用户管理页面
        case 'members':
            //*******************
            // TODO: 用户管理页面本该是仅由管理员才能访问的页面，
            // 现在请在下方「？」处实现对未登陆或者非管理员账户的页面跳转，
            // Hit： location.href = '/login' 是跳转到登陆页面的代码。
            //*******************

            // ？ // 如果没有登陆直接跳转到登陆页面

            function getMembers() {
                $.ajax({
                    url: '/api/users',
                    type: 'GET',
                    headers: {
                        'x-auth-token': localStorage.getItem('token')
                    },
                    success: function (data) {
                        console.log('users', data.users);
                        $('#members').html('');
                        $.each(data.users, function (_index, value) {
                            $('#members').append(`
                            <li class="list-group-item" id="member_${value.id}">
                    <div class="row">
                        <div class="col-auto">
                            <figure class="avatar avatar-50 rounded-10 shadow-sm">
                                <img src="/img/user2.jpeg" alt="">
                            </figure>
                        </div>
                        <div class="col px-0">
                            <p><b>${value.nickname}</b><br><small class="text-muted">${value.phoneNumber}</small></p>
                        </div>
                        <div class="col-auto text-end">
                            <button class="btn btn-sm btn-danger text-white" onclick="deleteMember(${value.id})"><i class="bi bi-trash-fill"></i></button>
                        </div>
                    </div>
                </li>
                            `);
                        });
                    },
                    error: function (jqXhr, _textStatus, _errorMessage) {
                        var error = JSON.parse(jqXhr.responseText).message.toLowerCase();
                        return console.error(error);
                    }
                });
            }
            getMembers();
            break;
    }

});

function GoBackWithRefresh(event) {
    if ('referrer' in document) {
        window.location = document.referrer;
    } else {
        window.history.back();
    }
}

// 删除车辆的方法
function deleteRego(targetRego) {
    var result = confirm('确认删除 ' + targetRego + ' 吗？');
    if (result) {
        $.ajax({
            url: '/api/cars/' + targetRego,
            type: 'DELETE',
            contentType: 'application/json',
            headers: {
                'x-auth-token': localStorage.getItem('token')
            },
            success: function (res) {
                $.notify("删除成功", "success");
                $('#' + targetRego).remove();
            },
            error: function (jqXhr, _textStatus, _errorMessage) {
                console.error(JSON.parse(jqXhr.responseText).message);
                $.notify("删除失败:" + JSON.parse(jqXhr.responseText).message, "error");
            }
        });
    }
}

// 删除评价的方法
function deleteComment(targetComment) {
    var result = confirm('确认删除这条评价吗？');
    if (result) {
        $.ajax({
            url: '/api/comments/' + targetComment,
            type: 'DELETE',
            contentType: 'application/json',
            headers: {
                'x-auth-token': localStorage.getItem('token')
            },
            success: function (res) {
                $.notify("删除成功", "success");
                $('#comment_' + targetComment).remove();
            },
            error: function (jqXhr, _textStatus, _errorMessage) {
                console.error(JSON.parse(jqXhr.responseText).message);
                $.notify("删除失败:" + JSON.parse(jqXhr.responseText).message, "error");
            }
        });
    }
}

// 删除用户的方法
//*******************
// TODO: 尝试模仿上面的函数，实现删除用户的方法
//*******************
function deleteMember(targetMember) {
    // ？
}